import type { RbacUserRoleType } from '@/data/auth/admin';
import { RbacRoleType } from '@/data/auth/role';
import { RbacUserStatusValueEnum } from '@/enums/auth';
import { useRoles } from '@/hooks/auth/useRoles';
import { useTenants } from '@/hooks/auth/useTenants';
import {
  ModalForm,
  ProFormGroup,
  ProFormSelect,
  ProFormText,
  ProFormTextArea,
} from '@ant-design/pro-components';
import React, { useEffect, useRef, useState } from 'react';

export type FormValueType = {
  target?: string;
  template?: string;
  type?: string;
  time?: string;
  frequency?: string;
} & Partial<RbacUserRoleType>;

export type UpdateFormProps = {
  onCancel: (flag?: boolean, formVals?: FormValueType) => void;
  onSubmit: (values: FormValueType) => Promise<void>;
  updateModalVisible: boolean;
  values: Partial<RbacUserRoleType>;
};

const UpdateModal: React.FC<UpdateFormProps> = (props) => {
  const { allRoles } = useRoles();
  const [roleOptions, setRoleOptions] = useState<any>([]);
  const formRef = useRef<any>(null);
  const { allTenantValueEnum } = useTenants();

  useEffect(() => {
    console.log('allRoles1:', allRoles);
    console.log('props.values.tenantId:', props.values.tenantId);

    if (allRoles && props.values.tenantId) {
      const roles = allRoles
        //.filter((role) => role.tenantId === props.values.tenantId)

        .map((role: RbacRoleType) => ({
          label: role.name,
          value: role.id,
        }));
      console.log('allRoles1:', allRoles);
      setRoleOptions(roles);
    }
  }, [allRoles, props.values.tenantId]);
  return (
    <ModalForm
      title="更新"
      width="800px"
      open={props.updateModalVisible}
      onFinish={(values) => {
        return props.onSubmit(values);
      }}
      formRef={formRef}
      onOpenChange={(value) => {
        if (!value) {
          props.onCancel();
        }
      }}
      key={`user-update-form-${props.values?.id || Math.random()}`}
    >
      <ProFormGroup colProps={{ span: 12 }}>
        <ProFormSelect
          name="tenantId"
          label="租户"
          width="md"
          disabled
          valueEnum={allTenantValueEnum}
          initialValue={props.values?.tenantId}
        />
      </ProFormGroup>
      <ProFormGroup colProps={{ span: 12 }}>
        <ProFormText
          name="username"
          label="用户名"
          width="md"
          rules={[
            {
              required: true,
              message: '请输入用户名\t！',
            },
          ]}
          initialValue={props.values?.username}
        />
        <ProFormText
          name="mobile"
          label="手机号"
          width="md"
          rules={[
            {
              required: true,
              message: '请输入电话号码\t！',
            },
          ]}
          initialValue={props.values?.mobile}
        />
        <ProFormSelect
          rules={[
            {
              required: true,
              message: '至少选择一个角色',
            },
          ]}
          width="md"
          name="roles"
          label={'角色'}
          mode="multiple"
          options={roleOptions}
          initialValue={props.values?.roleIds}
        />
        <ProFormSelect
          name="status"
          width="md"
          label="状态"
          valueEnum={RbacUserStatusValueEnum}
          initialValue={props.values?.status}
        />

        <ProFormTextArea
          name="remark"
          width="md"
          label="备注"
          placeholder="请输入至少五个字符"
          rules={[
            {
              required: true,
              message: '请输入至少五个字符的备注！',
              min: 5,
            },
          ]}
          initialValue={props.values?.remark}
        />
      </ProFormGroup>
    </ModalForm>
  );
};

export default UpdateModal;
